<template>
    <h-section title="自发产品需求" collapse :defaultOpen="!!productList.length || !disabled" ref="relateProduct">
        <ProductTable ref="ProductTableRef" :list="productList" v-bind="$props" @syncData="getSyncData" />
    </h-section>
</template>

<script lang="ts">
import ProductTable from './productTable.vue';
import { defineComponent, ref, unref, reactive, toRefs, watch, computed } from 'vue';
export default defineComponent({
    name: 'RelateProductList',
    components: {
        ProductTable
    },
    props: {
        detail: { type: Object, default: () => ({}) },
        disabled: { type: Boolean, default: false },
        isShowHistoryDetail: { type: Boolean, default: false },
        stepStatus: { type: String, default: '' }
    },
    emits: ['success'],
    setup(props) {
        const ProductTableRef = ref<any>();
        const state = reactive<any>({
            form: {
                pmpProductRequires: []
            },
            formErrorMsg: ''
        });
        // 没有关联业务需求的产品需求
        const productList = computed(() => {
            return state.form.pmpProductRequires.filter((item) => !item.relateRequireId);
        });
        const getSyncData = (list: Recordable[]) => {
            const relateRequireList = state.form.pmpProductRequires.filter((item) => item.relateRequireId);
            state.form.pmpProductRequires = [...relateRequireList, ...list];
        };
        const validate = async () => {
            return unref(ProductTableRef).validate();
        };
        const init = () => {
            // 默认评分
            let pmpProductRequires = props.detail.pmpProductRequires ? props.detail.pmpProductRequires : [];
            console.log('需求', pmpProductRequires);
            pmpProductRequires = pmpProductRequires.map((item) => {
                if (item.pmpProductScoreDTO) {
                    const { requestDesc, prototype, splitGranularity } = item.pmpProductScoreDTO;
                    return {
                        ...item,
                        pmpProductScoreDTO: {
                            requestDesc: requestDesc || 0,
                            prototype: prototype || 0,
                            splitGranularity: splitGranularity || 0
                        }
                    };
                } else {
                    return {
                        ...item,
                        pmpProductScoreDTO: {
                            requestDesc: 5,
                            prototype: 5,
                            splitGranularity: 5
                        }
                    };
                }
            });
            state.form.pmpProductRequires = [...pmpProductRequires];
        };
        init();
        watch(() => props.detail, init, { deep: true });
        return {
            ProductTableRef,
            ...toRefs(state),
            productList,
            getSyncData,
            validate
        };
    }
});
</script>
<style lang="less" scoped>
.flow-text {
    margin-bottom: 8px;
    a {
        font-size: 14px;
        margin-left: 8px;
    }
}
</style>